import React, { useEffect, useState } from "react";
import axios from "axios";
import "./HerosCon.css";
import {
	useNavigate,
	useLocation,
	useParams,
	useSearchParams,
} from "react-router-dom";

export default function HerosCon() {
	let navigate = useNavigate();
	//接受url 地址 params  参数
	// let {id} = useParams();
	// console.log(obj);

	// 接受 url地址 query 参数
	/*  let [search,setSearch] = useSearchParams();  // 返回一个数组
    // console.log(search.get("id"));
    let id = search.get("id"); */

	// 接受 路由  state传递的数据
	let location = useLocation(); // 接受一个对象
	let { id } = location.state;
	// console.log(a);

	//配置英雄id
	// let [nid, setNid] = useState(1);
	//创建状态
	let [herocon, setHerocon] = useState({});

	//模拟生命周期
	useEffect(() => {
		async function main() {
			let { data } = await axios.get(`http://api.xiaohigh.com/heros/${id}`);
			// console.log(data);
			setHerocon(data);
		}
		main();
	}, []);

	// 回退
	let prev = () => {
		navigate(-1);
	};

	// 回到首页
	let home = () => {
		navigate("/home", {
			replace: true,
			state: {
				id: 1,
				name: "王能明",
			},
		});
	};

	return (
		<div className="heros-con">
			<div className="heros-left">
				<button style={{ float: "left" }} onClick={prev}>
					后退
				</button>
				<button style={{ float: "right" }} onClick={home}>
					回到首页
				</button>
				<img src={`https://cdn.xiaohigh.com${herocon.image}`} alt="" />
				<h2>{herocon.name}</h2>
				<h3>{herocon.type}</h3>
				<div className="img-min">
					<ul>
						{herocon.skills &&
							herocon.skills.map((item, index) => {
								return (
									<li key={index}>
										<img src={`https://cdn.xiaohigh.com${item.img}`} alt="" />
										<h4>{item.name}</h4>
									</li>
								);
							})}
					</ul>
				</div>
			</div>
			<div className="heros-right">
				<img src={`https://cdn.xiaohigh.com${herocon.big_image}`} alt="" />
				<p dangerouslySetInnerHTML={{ __html: herocon.intro }}></p>
			</div>
		</div>
	);
}
